<template>
    <div>
        <!--卡片-->
        <el-card class="box-card">
            <!--定义面包屑-->
            <el-breadcrumb separator=">">
                <el-breadcrumb-item :to="{ path: '/homePage' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>租赁管理</el-breadcrumb-item>
                <el-breadcrumb-item>车辆品牌</el-breadcrumb-item>
            </el-breadcrumb>
            <el-divider></el-divider>
            <el-form :inline="true" :model="queryCarbrandData"  class="demo-form-inline">
                <el-form-item >
                    <el-input v-model="queryCarbrandData.name" placeholder="请输入类型名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="showCarBrand">查询</el-button>
                    <el-button type="primary" @click="showAddForm({})">添加</el-button>
                </el-form-item>
            </el-form>

            <template>
                <el-table
                        :data="tableData"
                        :border="true"
                        stripe
                        style="width: 100%">
                    <el-table-column
                            prop="id"
                            label="汽车品牌id">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="汽车品牌名">
                    </el-table-column>
                    <el-table-column
                            prop="firstLetter"
                            label="首字母">
                    </el-table-column>
                    <el-table-column
                            prop="sort"
                            label="排序">
                    </el-table-column>
                    <el-table-column
                            prop="factoryStatus"
                            label="是否为品牌制造商">
                        <template slot-scope="scope">
                            <span v-if="scope.row.factoryStatus==0">不是</span>
                            <span v-if="scope.row.factoryStatus==1">是</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="状态">
                        <template slot-scope="scope">
                            <el-switch
                                    v-model="scope.row.status"
                                    active-color="#13ce66"
                                    :active-value="1"
                                    :inactive-value="0"
                                    inactive-color="#ff4949"
                                    @change="statusChange(scope.row)">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="logo"
                            label="品牌logo">
                        <template slot-scope="scope">
                            <img :src="scope.row.logo" style="width: 80px" alt="">
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="bigPic"
                            label="专区大图">
                        <template slot-scope="scope">
                            <img :src="scope.row.bigPic" style="width: 150px" alt="">
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="brandStory"
                            label="品牌故事">
                    </el-table-column>
                    <el-table-column label="操作" width="180">
                        <template slot-scope="scope">
                            <!-- 修改 -->
                            <el-button type="primary" icon="el-icon-edit" circle @click="showAddForm(scope.row)"></el-button>
                            <!-- 删除 -->
                            <el-button type="danger" icon="el-icon-delete" circle @click="deleteCarBrand(scope.row.id)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 7, 9]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>

                <el-dialog
                        title="新增车辆品牌"
                        :visible.sync="addForm"
                        width="30%">
                <span>
                    <!-- 新增车辆信息 -->
                    <el-form ref="brandForm" :model="addCarBrandForm" :rules="rules" label-position="left" label-width="80px">
                        <el-input v-model="addCarBrandForm.id" type="hidden"></el-input>
                        <el-form-item label="汽车品牌名" prop="name">
                            <el-input v-model="addCarBrandForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="首字母" prop="firstLetter">
                            <el-input v-model.number="addCarBrandForm.firstLetter"></el-input>
                        </el-form-item>
                        <el-form-item label="排序" prop="sort">
                            <el-input v-model.number="addCarBrandForm.sort"></el-input>
                        </el-form-item>
                        <el-form-item label="是否为品牌制造商" prop="factoryStatus">
                            <el-radio-group v-model="addCarBrandForm.factoryStatus">
                                <el-radio label="0">不是</el-radio>
                                <el-radio label="1">是</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        
                        <el-form-item label="品牌logo">
                            <el-upload
                                    class="avatar-uploader"
                                    action="http://192.168.0.100:80/clms-lease/carbrand/upload"
                                    :headers="headers"
                                    :show-file-list="false"
                                    :on-success="uploadLogo"
                                    :before-upload="beforeAvatarUpload">
                               <img v-if="logo" :src="logo" class="avatar">
                               <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>

                        <el-form-item label="专区大图">
                            <el-upload
                                    class="avatar-uploader"
                                    action="http://192.168.0.100:80/clms-lease/carbrand/upload"
                                    :headers="headers"
                                    :show-file-list="false"
                                    :on-success="uploadBigPic"
                                    :before-upload="beforeAvatarUpload">
                               <img v-if="bigPic" :src="bigPic" class="avatar">
                               <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>

                        <el-form-item label="品牌故事" prop="brandStory">
                            <el-input v-model="addCarBrandForm.brandStory"></el-input>
                        </el-form-item>
                    </el-form>
                </span>
                    <span slot="footer" class="dialog-footer">
                    <el-button @click="addForm = false">取 消</el-button>
                    <el-button type="primary" @click="addCarBrand('brandForm')">确 定</el-button>
                    </span>
                </el-dialog>
            </template>

        </el-card>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                headers: {
                    'Token' : sessionStorage.getItem("token")
                },
                value2: '',
                queryCarbrandData: {
                    name: '',
                },
                tableData: [],
                ddddd: '',
                addCarBrandForm: {
                    id: '',
                    name: '',
                    firstLetter: '',
                    sort: '',
                    factoryStatus: '',
                    logo: '',
                    bigPic: '',
                    brandStory: ''
                },
                rules:{
                    name: [
                        { required: true, message: '请输入汽车品牌名', trigger: 'blur' }
                    ],
                    firstLetter: [
                        { required: true, message: '请输入汽车品牌首字母', trigger: 'blur' }
                    ],
                    sort: [
                        { required: true, message: '请输入排序值', trigger: 'blur' },
                        { type: 'number', message: '排序值必须为数字', trigger: 'blur' }
                    ],
                    factoryStatus: [
                        { required: true, message: '请输选择是否是品牌制造商', trigger: 'blur' }
                    ],
                    brandStory: [
                        { required: true, message: '请输入汽车品牌故事', trigger: 'blur' }
                    ],
                },
                logo: '',
                bigPic: '',
                addForm : false,
                pageSize: 5,
                currentPage: 1,
                total: 0,
            }
        },
        methods:{
            handleSizeChange(value) {
                this.pageSize = value;
                this.showCarBrand();
            },
            handleCurrentChange(value) {
                this.currentPage = value;
                this.showCarBrand();
            },
            // 状态改变时触发
            statusChange(row) {
                this.$axios({
                    method: 'get',
                    url: 'clms-lease/carbrand/updateStatus',
                    params: {
                        id: row.id,
                        status: row.status
                    }
                }).then( result => {
                    if (result.data.code == 200) {
                        this.$message.success(result.data.message);
                        this.showAllUser()
                    } else {
                        this.$message.error(result.data.message)
                    }
                })
            },
            // 上传图片成功后的钩子函数
            uploadLogo(response, file) {
                this.addCarBrandForm.logo = response.img;
                this.logo = URL.createObjectURL(file.raw);
            },
            uploadBigPic(response, file) {
                this.addCarBrandForm.bigPic = response.img;
                this.bigPic = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            // 查询全部的汽车品牌
            showCarBrand() {
                this.$axios({
                    method: 'get',
                    url: 'clms-lease/carbrand/showCarBrand',
                    params: {
                        pageno: this.currentPage,
                        pagesize: this.pageSize,
                        name: this.queryCarbrandData.name,
                    }
                }).then( result => {
                    if (result.data.code == 200) {
                        this.tableData = result.data.listData;
                        this.total = result.data.object.total;
                    }
                })
            },
            // 显示新增的form表单
            showAddForm(row) {
                this.addForm = true;
                this.addCarBrandForm = row;
                this.logo = this.addCarBrandForm.logo;
                this.bigPic = this.addCarBrandForm.bigPic;
            },
            // 新增车辆配置
            addCarBrand(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (this.addCarBrandForm.id == null) {
                            this.$axios({
                                method: 'post',
                                url: 'clms-lease/carbrand/addCarBrand',
                                data : this.addCarBrandForm
                            }).then( result => {
                                if (result.data.code == 200) {
                                    this.addForm = false;
                                    this.$message.success(result.data.message);
                                    this.showCarBrand()
                                } else {
                                    this.$message.error(result.data.message)
                                }
                            })
                        } else {
                            this.$axios({
                                method: 'post',
                                url: 'clms-lease/carbrand/updayeCarBrand',
                                data : this.addCarBrandForm
                            }).then( result => {
                                if (result.data.code == 200) {
                                    this.addForm = false;
                                    this.$message.success(result.data.message);
                                    this.showCarBrand()
                                } else {
                                    this.$message.error(result.data.message)
                                }
                            })
                        }
                    } else {
                        this.$message.error("数据输入有误")
                    }
                });
            },
            // 删除汽车配置
            deleteCarBrand(id) {
                this.$confirm('确定删除此品牌吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios({
                        method: 'get',
                        url: 'clms-lease/carbrand/deleteCarBrand',
                        params: {
                            id: id
                        }
                    }).then( result => {
                        if (result.data.code == 200) {
                            this.$message.success(result.data.message);
                            this.currentPage = 1;
                            this.showCarBrand()
                        } else {
                            this.$message.error(result.data.message)
                        }
                    })
                });
            }
        },
        created() {
            this.showCarBrand()
        }
    }
</script>